<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="artFrom"
        :model="questionFrom"
        label-width="75px"
        label-position="right"
        @submit.native.prevent
      >
        <el-row type="flex">
          <el-col>
            <el-form-item label="搜索：" prop="title">
              <el-input v-model="questionFrom.title" placeholder="请输入服务名称" class="form_content_width">
                <el-button slot="append" icon="el-icon-search" @click="examSearchs" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="24">
          <el-col>
            <el-form-item label="服务分类：" prop="cateId">
              <el-cascader
              v-model="cateId"
              :options="cateList"
              :props="{
                value:'id',
                label:'title'
              }"
              :clearable="true"
              class="form_content_width"
              @change="selectCategory"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="门店：" prop="companyId">
              <el-select
                v-model="questionFrom.companyId"
                placeholder="请选择"
                filterable
                @change="selectType"
                class="form_content_width"
              >
                <el-option label="全部" value="" />
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="questionFrom.status"
                placeholder="请选择"
                clearable
                filterable
                @change="selectType"
                class="form_content_width"
              >
                <el-option label="全部" value="all" />
                <el-option label="审核中" value="3" />
                <el-option label="未通过" value="2" />
                <el-option label="已下架" value="0" />
                <el-option label="上架中" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          :data="ItemList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-current-row
        >
          <el-table-column label="Id" min-width="100" fixed="left" #default="{row}">{{row.id}}</el-table-column>
          <el-table-column label="服务名称" min-width="150" #default="{row}">{{row.title}}</el-table-column>
          <el-table-column label="所属门店" min-width="150" #default="{row}">{{row.companyName}}</el-table-column>
          <el-table-column label="状态" prop="status" #default="{ row }" min-width="200">
            <div v-if="row.status == 3">
              <el-button type="danger" icon="el-icon-close" size="small" @click="invalid(row)">驳回</el-button>
              <el-button
                type="primary"
                icon="el-icon-check"
                size="small"
                @click="adopt(row, '审核通过', index)"
              >通过</el-button>
            </div>
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              v-if="[0,1].indexOf(row.status) >= 0"
              @change="onchangeStatus(row)"
              active-text="上架"
              inactive-text="下架"
            />
            <div v-if="row.status == 2">{{'被驳回'}}</div>
          </el-table-column>
          <el-table-column label="是否热门">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.hotSales"
                :value="row.hotSales"
                :active-value="1"
                :inactive-value="0"
                @change="onChangeHot(row)"
                size="large"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="缩略图" prop="thumb" #default="{ row }">
            <div class="tabBox_img">
              <img v-lazy="row.thumb" />
            </div>
          </el-table-column>
          <el-table-column label="简介" min-width="200" #default="{row}">{{row.shortTitle}}</el-table-column>
          <el-table-column label="价格" min-width="150" #default="{row}">{{row.price}}</el-table-column>
          <el-table-column label="起购数量" min-width="150" #default="{row}">{{row.minBuy}}</el-table-column>
          <el-table-column label="推荐" prop="isRecommend" #default="{ row }">
            <el-switch
              v-model="row.isRecommend"
              :active-value="1"
              :inactive-value="0"
              @change="onchangeRecommend(row)"
              active-text="是"
              inactive-text="否"
            />
          </el-table-column>
          <el-table-column label="添加时间" #default="{ row }" min-width="200">{{row.addTimeStr}}</el-table-column>

          <el-table-column label="操作" #default="{ row }" min-width="200" fixed="right">
            <el-divider direction="vertical" />
            <el-button type="text" @click="edit(row)">修改</el-button>
            <el-divider direction="vertical" />
            <el-button type="text" @click="del(row)">删除</el-button>
          </el-table-column>
        </el-table>
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            :current-page="questionFrom.page"
            :page-size="questionFrom.limit"
            layout="total, prev, pager, next, jumper"
            @current-change="pageChange"
          />
        </div>
      </el-form>
    </el-card>

    <el-dialog :visible.sync="modals" title="未通过原因" :close-on-click-modal="false">
      <el-input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
      <div slot="footer">
        <el-button type="primary" :loading="modal_loading" @click="oks">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getCompanyListApi } from '@/api/base';
import {
  getItemListApi,
  getServiceCateListApi,
  ItemIsRecomApi,
  ItemStatusApi,
  ItemTypeApi,
  itemAdoptApi,
  itemRefuseApi,
  itemDelApi ,
  itemSetHotApi
} from '@/api/onsite';
export default {
  name: 'onsite_index',
  data() {
    return {
      modal_loading: false,
      modals: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      questionFrom: {
        cateId: '',
        companyId: '',
        type: '',
        status: 'all',
        itemType: 'all',
        isCompany: 1,
        type: 1,
        title: '',
        page: 1,
        limit: 10,
      },
      fail_msg: {
        message: '输入信息不完整或有误!',
      },
      companyList: [],
      ItemList: [],
      cateList: [],
      itemSpecData: {},
      loading: false,
      total: 0,
      item_id: 0,
    };
  },
  created() {
    // this.questionFrom.cate_id = this.$route.query.id ? this.$route.query.id : 0;

    this.getCategory();
    this.getList();
    this.getCompanies();
  },
  activated() {
    // this.questionFrom.cate_id = this.$route.query.id ? this.$route.query.id : 0;
    this.getCategory();
    this.getList();
    this.getCompanies();
  },
  mounted() {},
  methods: {
    // 通过
    adopt(row, tit, num) {
      this.$modalSure(tit)
        .then(() => {
          itemAdoptApi(row.id).then(res => {
            this.$message.success('操作成功')
            this.getList();
          }).catch(err => {
            this.$message.error('操作失败');
          })
        })
    },
    //驳回
    invalid(row) {
      this.item_id = row.id;
      this.modals = true;
    },
    // 确定
    oks() {
      this.modal_loading = true;
      itemRefuseApi({id:this.item_id, message:this.fail_msg.message})
        .then(async (res) => {
          this.$message.success(res.msg);
          this.modal_loading = false;
          this.modals = false;
          this.getList();
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    getCompanies() {
      getCompanyListApi({ status: 'all' ,page:1,limit:999}).then((res) => {
        this.companyList = res.list;
      });
    },
    getList() {
      this.loading = true;
      getItemListApi(this.questionFrom)
        .then(async (res) => {
          let data = res;
          let list = res.list;
          let count = res.total;
          this.total = count;
          this.ItemList = list;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    getCategory() {
      getServiceCateListApi({limit:9999})
        .then(async (res) => {
          this.cateList = res.list;
        })
    },
    pageChange(index) {
      this.questionFrom.page = index;
      this.getList();
    },
    selectCategory(e) {
      if(!e){
        this.questionFrom.cateId = 'all';
      }else{
        this.questionFrom.cateId = e[1]
      }
      this.questionFrom.page = 1;
      this.getList();
    },
    selectType(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    examSearchs(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    onChangeHot(row){
      let data = {
        id:row.id,
        hotSales:row.hotSales
      }
      itemSetHotApi(data).then(res => {
        this.$message.success('操作成功')
      })
    },
    onchangeStatus(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      ItemStatusApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    onchangeRecommend(row) {
      let data = {
        id: row.id,
        isRecommend: row.isRecommend,
      };
      ItemIsRecomApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    onchangeItemType(row) {
      let data = {
        id: row.id,
        itemType: row.itemType,
      };
      ItemTypeApi(data)
        .then(async (res) => {
          this.$message.success(res.msg);
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    // 编辑
    edit(row) {
      this.$router.push({
        path: '/onsite/add_item',
        query: {
          id: row.id,
        },
      });
    },
    // 规格
    ItemSpec(row) {
      this.modals = true;
      this.item_id = row.id;
    },
    // 删除
    del(row) {
      this.$modalSure(`删除【${row.title}】`).then(() => {
        itemDelApi(row.id).then((res) => {
          this.$message.success('操作成功');
          this.getList();
        });
      });
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .form_content_width{
    width: 180px !important
  }
  .treeSel >>>.ivu-select-dropdown-list {
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
  